<template>
  <div class="evaluate-box">
    <nav-bar title="评价"></nav-bar>
    <div class="evaluate_header">
      <div class="authentication">已认证</div>
      <img :src="driver_header" class="photo" />
      <div class="">
        <div class="name">{{ params.driverName }}</div>
        <div class="detail">
          {{ params.plateNo }} | {{ params.vehicleLongDesc ?? params.vehicleLong }}米 |
          {{ params.vehicleTypeDesc ?? params.vehicleType }}
        </div>
      </div>
    </div>

    <div class="evaluate_content">
      <div class="evaluate_content_top">
        <div class="title">整体满意度</div>
      </div>
      <div class="evaluate_content_rate">
        <div class="subheading">{{ gradeText }}</div>
        <van-rate v-model="satisfactionGrade" color="#FFCA2C" size="25px" gutter="20" :readonly="isComments" />
      </div>
      <div class="evaluate_content_tabs">
        <div
          class="tab_item"
          :class="{ tab_item_active: item.selected }"
          v-for="(item, index) in tagArr"
          :key="index"
          @click="selectTag(item)"
        >
          {{ item.tagName }}
        </div>
      </div>
    </div>

    <div class="evaluate_content">
      <div class="evaluate_content_top">
        <div class="title">运输服务评分</div>
      </div>
      <div class="service_rate" v-for="(item, index) in serviceScoreList" :key="index">
        <div class="service_rate_title">{{ item.title }}</div>
        <van-rate v-model="item.value" color="#FFCA2C" size="25px" gutter="20" :readonly="isComments" />
      </div>
    </div>

    <div class="evaluate_content" v-show="!(isComments && !content)">
      <div class="evaluate_content_top">
        <div class="title">评价内容</div>
      </div>
      <div class="evaluate_text">
        <textarea v-model="content" maxlength="200" placeholder="告诉货主，激励我们做的更好~" :disabled="isComments" />
        <div class="acount">{{ getRemnant }}/200</div>
      </div>
      <div class="anonymity" @click="handleCheck" v-show="!isComments">
        <svg-icon :name="anonymous ? 'agree' : 'noAgree'"></svg-icon>
        匿名提交
      </div>
      <van-button class="button" block type="primary" @click="submit" v-show="!isComments">提交评价</van-button>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, computed, onMounted, watchEffect } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { Toast, Dialog } from 'vant'
import NavBar from '@/components/NavBar.vue'
import { api } from '@/http/api'
import http from '@/http'
import store from '@/store/index'
import driver_header from '@/assets/image/driver_header.png'
import evaluate_success from '@/assets/image/waybill/evaluate.png'

export default defineComponent({
  name: 'Evaluate',
  components: {
    NavBar
  },
  setup() {
    const router = useRouter(),
      route = useRoute()
    const params = route.params.params ? JSON.parse(route.params.params as string) : {}
    let state = reactive({
      satisfactionGrade: 5,
      content: '',
      remnant: 0,
      tagArr: [] as any[],
      tagId: '',
      anonymous: 1,
      isComments: false,
      gradeText: '非常满意，无可挑剔',
      serviceScoreList: [
        {
          title: '装货时效性',
          key: 'loadGoodsGrade',
          value: 5
        },
        {
          title: '卸货时效性',
          key: 'unloadGoodsGrade',
          value: 5
        },
        {
          title: '货物完好性',
          key: 'goodsSafeGrade',
          value: 5
        },
        {
          title: '沟通效率',
          key: 'communicateGrade',
          value: 5
        },
        {
          title: '服务态度',
          key: 'serviceAttitudeGrade',
          value: 5
        },
        {
          title: '运输效率',
          key: 'transportGrade',
          value: 5
        }
      ]
    })
    const getRemnant = computed(() => state.content.length)

    //选择是否匿名
    const handleCheck = () => {
      if (state.isComments) return
      if (state.anonymous === 1) {
        state.anonymous = 0
      } else {
        state.anonymous = 1
      }
    }

    //获取评价标签
    const getEvaluateTags = (tagAttribut: number) => {
      if (params.consComments) return
      http({
        url: api.getSysTagLibraryPage,
        method: 'get',
        params: {
          pageNo: 1,
          pageSize: 20,
          tagType: 1,
          tagAscript: 2,
          status: 0,
          tagAttribut
        }
      }).then((res: any) => {
        state.tagArr = res.rows
      })
    }

    //选择评价标签
    const selectTag = (item: any) => {
      if (state.isComments) return
      if (item.selected) {
        item.selected = false
      } else {
        const tagArr = state.tagArr.filter((item: any) => item.selected)
        if (tagArr.length > 2) return
        item.selected = true
      }
    }

    //提交评价
    const submit = () => {
      const paramsData = {
        billId: params.id,
        billNo: params.billNo,
        driverId: params.driverId,
        driverName: params.driverName
      }
      const stateData: { [key: string]: any } = { ...state }
      stateData.tagId = stateData.tagArr
        .filter((item: any) => item.selected)
        .map((item: any) => item.id)
        .join(',')
      stateData.serviceScoreList.map((item: any) => {
        stateData[item.key] = item.value
      })
      const data = Object.assign(stateData, paramsData, { type: 1 })
      http({
        url: api.addComment,
        method: 'post',
        data
      }).then((res: any) => {
        Toast({
          message: '评价成功',
          icon: evaluate_success,
          className: 'toast_success'
        })
        router.go(-1)
      })
    }

    const initData = () => {
      const consComments = params.consComments
      const consCommentsScore = params.consCommentsScore
      state = Object.assign(state, {
        anonymous: consComments.anonymous,
        satisfactionGrade: consCommentsScore.satisfactionGrade,
        content: consComments.content
      })
      const { serviceScoreList } = state
      serviceScoreList.map(item => {
        item.value = consCommentsScore[item.key]
      })
      if (consComments.tagName) {
        consComments.tagName.split(',').map((item: any) => {
          state.tagArr.push({
            tagName: item,
            selected: true
          })
        })
      }
    }

    watchEffect(() => {
      if ([4, 5].includes(state.satisfactionGrade)) {
        state.gradeText = '非常满意，无可挑剔'
        getEvaluateTags(1)
      } else if (state.satisfactionGrade === 3) {
        state.gradeText = '一般，还需改善'
        getEvaluateTags(2)
      } else if (state.satisfactionGrade === 2) {
        state.gradeText = '不满意，比较差'
        getEvaluateTags(3)
      } else {
        state.gradeText = '非常不满意，各方面都很差'
        getEvaluateTags(3)
      }
    })

    onMounted(() => {
      if (params.consComments) {
        state.isComments = true
        initData()
      }
    })

    return {
      ...toRefs(state),
      driver_header,
      getRemnant,
      params,
      handleCheck,
      selectTag,
      submit
    }
  }
})
</script>

<style lang="scss" scoped>
@import '@/style/variables.scss';
@import '@/style/mixins.scss';
.evaluate-box {
  width: 100%;
  overflow-y: scroll;
  padding: 15px 12px;
  box-sizing: border-box;
}
.evaluate_header {
  height: 88px;
  background: #ffffff;
  box-shadow: 0px 2px 10px 0px rgba(93, 184, 255, 0.07);
  border-radius: 10px;
  padding: 20px 15px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  position: relative;
  .photo {
    width: 48px;
    height: 48px;
    box-shadow: 0px 2px 6px 0px rgba(175, 175, 175, 0.21);
    margin-right: 10px;
    border-radius: 50%;
  }
  .name {
    font-size: 16px;
    line-height: 22px;
    width: 200px;
    @include ellipsis;
  }
  .detail {
    margin-top: 5px;
    font-size: 12px;
    color: $color-text-regular;
    line-height: 17px;
  }
  .authentication {
    width: 82px;
    height: 32px;
    border-radius: 2px;
    background: rgba(255, 0, 79, 0.02);
    border: 1px solid rgba(255, 0, 79, 0.5);
    color: #ff004f;
    text-align: center;
    line-height: 34px;
    position: absolute;
    top: 15px;
    right: -7px;
    font-size: 22px;
    transform: scale(0.5);
  }
}
.evaluate_content {
  background: #ffffff;
  box-shadow: 0px 2px 10px 0px rgba(93, 184, 255, 0.07);
  border-radius: 10px;
  padding: 10px;
  box-sizing: border-box;
  margin-top: 10px;
  .evaluate_content_top {
    margin-left: -10px;
    margin-bottom: 20px;
    margin-top: 5px;
    .title {
      width: 90px;
      height: 24px;
      line-height: 24px;
      background: #6dacff;
      border-radius: 0px 12px 12px 0px;
      font-size: 14px;
      color: #ffffff;
      padding: 0 10px;
      box-sizing: border-box;
    }
  }
  .evaluate_content_rate {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    border-bottom: 1px solid #ededed;
    padding-bottom: 17px;
    box-sizing: border-box;
    .subheading {
      margin-bottom: 7px;
    }
  }
  .service_rate {
    display: flex;
    margin-bottom: 15px;
    align-items: center;
    .service_rate_title {
      flex: 0 0 85px;
    }
  }
  .evaluate_content_tabs {
    display: flex;
    flex-wrap: wrap;
    margin: 20px 0 0 0;
    .tab_item {
      height: 30px;
      background: rgba(159, 162, 175, 0.1);
      border-radius: 15px;
      padding: 0 15px;
      line-height: 30px;
      color: $color-text-regular;
      margin-right: 10px;
      margin-bottom: 10px;
      border: 1px solid #fff;
      box-sizing: border-box;
    }
    .tab_item_active {
      background: rgba(64, 158, 255, 0.05);
      border: 1px solid $color-primary;
      color: $color-primary;
      box-sizing: border-box;
    }
  }
  .evaluate_text {
    width: 331px;
    min-height: 100px;
    background: rgba(159, 162, 175, 0.08);
    border-radius: 8px;
    border: 1px solid rgba(159, 162, 175, 0.2);
    padding: 10px;
    box-sizing: border-box;
    .acount {
      text-align: right;
    }
    textarea {
      width: 100%;
      background: none;
      border-radius: 6px;
      border: none;
      resize: none;
      line-height: 18px;
      min-height: 70px;
      height: auto;
      // margin: ;
    }
    textarea::-webkit-input-placeholder {
      /* WebKit browsers */
      color: #cccccc;
    }
    textarea:-moz-placeholder {
      /* Mozilla Firefox 4 to 18 */
      color: #cccccc;
    }
    textarea::-moz-placeholder {
      /* Mozilla Firefox 19+ */
      color: #cccccc;
    }
    textarea::-ms-input-placeholder {
      /* Internet Explorer 10+ */
      color: #cccccc;
    }
  }
  .anonymity {
    color: $color-text-regular;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-top: 12px;
    .svg-icon {
      width: 16px;
      height: 16px;
      margin-right: 6px;
    }
  }
  .button {
    margin-top: 30px;
    border-radius: 24px;
  }
}
</style>
